<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		/* 背景色样式，宽高300px */
	.bgColor {
			  width: 300px;
			  height: 300px;
			  background-color: lightskyblue;
			}
					
		/* 边框样式，10像素实线红色边框，圆角 */
	.broders {
			  border: 10px solid yellow;
			  border-radius: 50%;
			}
		</style>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		 1.addClass()     添加类名      有参：1个参和多个参
		                               语法：addClass("类名")【1个参】
									   <p class="类名">
									   语法：addClass("类名1 类名2")
									   <p class="类名1 类名2">
								  功能：匹配元素集合中的所有元素
									   添加一个或者多个类名操作
									   理解：元素添加存在的样式
		 2.removeClass()  移除类名     功能：匹配元素集合中的所有元素
									   移除一个或者多个类名操作
		 3.toggleClass()  切换类名    功能：如果元素有类名移除，没有则添加
		 4.hasClass()     检查类名    功能：检查匹配元素集合中是否包含指定类名
		                                   返回值bool
		 -->
		 <!-- 要求：1.jq引入
		           2.html：    div  id="targetElement"
				             四个按钮  id="addClassBtn"
							          id="removeClassBtn"
							          id="toggleClassBtn"
							          id="hasClassBtn"
							div id="resultArea"	
					3.css:    .bgColor{   300*300  背景色随意}
							.broders{10个像素实线红色边框  倒角画圆}  				 
		  -->
	</head>
	<body>
			<!-- 创建目标元素 -->
			<div id="targetElement" class="bgColor"></div>
			<!-- 创建按钮，用于不同的操作 -->
			<button id="addClassBtn">添加类名</button>
			<button id="removeClassBtn">移除类名</button>
			<button id="toggleClassBtn">切换类名</button>
			<button id="hasClassBtn">检查类名是否存在</button>
			<!-- 创建结果区域，用于显示是否包含类名 -->
			<div id="resultArea"></div>
		
			<script>
				
				/* $(document).ready(function() { */
					// 点击“添加类名”按钮时，添加效果【样式】 300*300背景色浅黄色
					$('#addClassBtn').click(function() {
						$('#targetElement').addClass('bgColor broders');
						$('#resultArea').html('<h4>添加样式类名：bgColor</h4>')
					});
		
					// 点击“移除类名”按钮时，移除.broders类
					$('#removeClassBtn').click(function() {
						$('#targetElement').removeClass('broders');
						$('#resultArea').html('<h4>移除样式类名：bgColor</h4>')
					});
		
					// 点击“切换类名”按钮时，切换.broders类
					$('#toggleClassBtn').click(function() {
						$('#targetElement').toggleClass('broders');
						$('#resultArea').html('<h4>切换样式类名：broders</h4>')
					});
		
					// 点击“检查类名”按钮时，检查#targetElement是否包含.broders类
					$('#hasClassBtn').click(function() {
						 $('#targetElement').hasClass('broders') 
							$('#resultArea').text('检查当前样式是否存在：'+hc);
					});
				/* }); */
			</script>
	</body>
</html>